<script setup lang="ts">
import { ref, reactive } from 'vue';

const props = defineProps<{
    ujt: any;
}>();
const { $global } = props.ujt;
const scdata: any = reactive({
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    id: 10,
});

setInterval(() => {
    scdata.id += 1;
    scdata.list.push(scdata.id);
}, 200);

const longPressData: any = reactive({
    isPressed: false,
    timer: null,
});
const onPress = (e) => {
    longPressData.isPressed = true;
    console.log('按下事件', e);
};

const onHold = (e) => {
    console.log('长按事件', e);
    let i = 0;
    longPressData.timer = setInterval(() => {
        i++;
        console.log(i, '长按事件触发');
    }, 1000);
};

const onRelease = (e) => {
    longPressData.isPressed = false;
    if (longPressData.timer != null) {
        clearInterval(longPressData.timer);
        longPressData.timer = null;
    }
    console.log('释放事件', e);
};
</script>

<template>
    <button
        v-longpress="{
            press: onPress,
            hold: onHold,
            release: onRelease,
        }"
        :class="{ 'bg-blue-500': longPressData.isPressed }"
    >
        交互按钮
    </button>
    <div class="as-sc-area" v-scrollbottom>
        <div class="as-sc-li" v-for="item in scdata.list">
            {{ item }}
        </div>
    </div>
    <h1>公共页面：任意访问</h1>
    <p>
        控制源：前端文件夹中\webmodel\sys\config\configrouter.json的文件里面rights配置项
    </p>
    <pre>
        {{ JSON.stringify($global.sys.router.rights, null, 2) }}
    </pre>
</template>

<style scoped lang="scss">
.as-sc-area {
    height: 50%;
    overflow-y: auto; /* 启用垂直滚动 */
}
</style>
